<template>
  <section>
    <el-col class="toolbar">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.search" placeholder="输入用户姓名/手机号/ID" @keyup.native="searchUser"></el-input>
        </el-form-item>
        <el-form-item>
          注册时间
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="filters.startDate"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>至</el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="filters.endDate"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getUsers" icon="el-icon-search">查询</el-button>
        </el-form-item>

        <el-form-item style="float: right">
          <el-tooltip class="item" effect="dark" content="将当前搜索结果导出为Excel表格" placement="top">
            <el-button type="primary" @click="exportToExcel" icon="el-icon-download">导出</el-button>
          </el-tooltip>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="success" v-on:click="reset" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="this.sels = sels"
              style="width: 100%;">
      <el-table-column type="index" :index="getIndex" width="60">
      </el-table-column>
      <el-table-column prop="user_no" label="用户ID" sortable>
      </el-table-column>
      <el-table-column prop="user_name" label="用户名" sortable>
      </el-table-column>
      <el-table-column prop="user_phone" label="手机" sortable>
      </el-table-column>
      <el-table-column prop="user_email" label="邮箱" sortable>
      </el-table-column>
      <el-table-column prop="created_at" label="注册时间" sortable>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="medium" @click="handleView(scope.row)" type="text">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页start -->
    <el-col :span="24" class="toolbar" v-show="1">
      <el-pagination layout="total, sizes, prev, pager ,next" :page-size="filters.pageSize"
                     :total="filters.total"
                     @current-change="handlePageChange" @size-change="handleSizeChange">
      </el-pagination>
    </el-col>
    <!--分页end -->
  </section>
</template>

<script>
  import util from '../../common/js/util'
  import {
    getUsersList
  } from '../../api/api'

  export default {
    data () {
      return {
        filters: {
          search: '',
          pageSize: 10,
          page: 1,
          total: 0,
          term: []
        },
        users: [],
        listLoading: false,

        //  dataPicker 日期选择器
        pickerOptions1: {
          shortcuts: [
            {
              text: '今天',
              onClick (picker) {
                picker.$emit('pick', new Date())
              }
            },
            {
              text: '昨天',
              onClick (picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', date)
              }
            },
            {
              text: '一周前',
              onClick (picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', date)
              }
            },
            {
              text: '一个月前',
              onClick (picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', date)
              }
            },
            {
              text: '三个月前',
              onClick (picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', date)
              }
            }
          ]
        },
        timeout: null
      }
    },
    computed: {},
    methods: {
      //  页面改变
      handlePageChange (val) {
        this.filters.page = val
        this.getUsers()
      },
      //  每页数量改变
      handleSizeChange (val) {
        this.filters.pageSize = val
        this.getUsers()
      },
      //  列表导出
      exportToExcel () {
        let filters = {
          sort: '',
          search: this.filters.search,
          pageSize: 1000000, // 暂时100万条
          startDate: this.filters.startDate,
          endDate: this.filters.endDate,
          excel: 'excel'
        }
        getUsersList(filters).then(res => {
          if (parseInt(res.status) === 1) {
            let a = document.createElement('a')
            a.href = res.data
            a.download = 'user.xlsx'
            a.click()
          } else {
            this.$alert('下载失败', '错误', {type: 'error'})
          }
        })
      },
      // 列表索引
      getIndex (index) {
        return parseInt(this.filters.pageSize) * parseInt(this.filters.page - 1) + index + 1
      },
      // 重置
      reset () {
        this.filters = {
          search: '',
          pageSize: 10,
          page: 1,
          total: 0,
          term: []
        }
        this.getUsers()
      },
      //  获取用户列表
      getUsers () {
        //  判断日期合法性
        if (this.filters.startDate && this.filters.endDate && this.filters.startDate > this.filters.endDate) {
          [this.filters.startDate, this.filters.endDate] = [this.filters.endDate, this.filters.startDate]
        }
        let para = {
          sort: '',
          page: this.filters.page,
          search: this.filters.search,
          pageSize: this.filters.pageSize,
          startDate: this.filters.startDate,
          endDate: this.filters.endDate
        }
        this.listLoading = true
        getUsersList(para).then((data) => {
          if (data.status === 1) {
            this.filters.page = data.currentPage
            this.filters.total = data.totalCount
            this.users = data.data
            this.listLoading = false
          }
        })
      },
      //  查看用户详情
      handleView (row) {
        let id = row.user_id
        this.$router.push({path: `/users/${id}`})
        // viewUser(row.user_id).then((res)=>{
        //     console.log(res);
        // })
      },
      //  搜索用户-延迟500ms
      searchUser () {
        util.debounce(this.getUsers, 500)()
      }
    },
    mounted () {
      this.getUsers()
      // console.log(this.$store.getters.getCount)
    },
    watch: {}
  }
</script>

<style scoped lang="sass">
  .toolbar
    padding-bottom: 0px
</style>
